<template>
  <div
    v-if="isReady"
    class="fixed left-0 top-0 right-0 bottom-0 flex items-center justify-center z-1"
  >
    <LlMap
      @cancel="handleCancel"
      @clock="handleClockIn"
      type="clock-in"
      :clockOptions="clockOptions"
    />
  </div>
</template>

<script>
import LlMap from "@/components/ll-map";
import { fetchTodoDetail, fetchTodoSign } from "@/services";
import { Toast } from "vant";
export default {
  components: {
    LlMap,
  },
  data() {
    return {
      isReady: false,
      clockOptions: {
        poi: [],
      },
    };
  },
  created() {
    this._initData();
  },
  methods: {
    async _initData() {
      try {
        const result = await fetchTodoDetail({ todoId: this.$route.query.id });
        this.clockOptions.poi = result.poi;
        // this.clockOptions.poi = "B001C8R874";
        // this.clockOptions.poi = "B0G1FUO1N2";
        this.isReady = true;
      } catch (error) {
        Toast("获取详情失败");
      }
    },
    handleCancel() {
      this.$router.back();
    },
    async handleClockIn(val, status) {
      try {
        const {
          position: { lng, lat },
          formattedAddress,
        } = val;
        await fetchTodoSign({
          id: this.$route.query.id,
          poi: `${lng},${lat}`,
          address: formattedAddress,
          isRange: !status,
        });
        this.$store.commit(`work/${this.$route.query.load}`, {
          value: true,
        });
        Toast({
          message: "签到成功",
          onClose: () => {
            this.handleCancel();
          },
        });
      } catch (error) {
        Toast("签到失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
